<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname">
  </div>
</template>

<script>
export default {
  data(){
    return{
      uname:'zhangsan',
      dog:{
        name:'张三',
        age:3
      }
    }
  },
  //侦听器，要写到和data 平级的 watch 里面
  watch: {
    //1.函数写法
    // uname(newval,oldval){
    //   console.log(newval,oldval);
    // },
    //2.对象写法
    uname:{
      handler(newval,oldval){
        //写对象格式，handler必须写，名字固定
        console.log(newval,oldval);
      },
      immediate:true   //// 表示页面刷新后，马上侦听一次 username 的值

    },
    dog:{
      handler(newval,oldval){
        console.log(newval,oldval);
      },
      deep:true  //表示深度侦听，当对象的任意属性改变后，都会触发该侦听器
    },

    //单独 侦听一些对象的属性
    'dog.age'(newval){
      console.log(newval);
    }
  }
}
</script>

<style>

</style>